css 行内容高度的自适应

做卡片时经常会遇到卡片内容不同，导致高度撑开不相。如果此时想要高度相同的话可能会有种hacker代码，下面提供一种使用grid 和 flex 布局结合的处理方法，供参考。 原文地址： Equal Height Boxes with CSS Grid Layout

外部布局使用gird, 格子内部使用 flex，大致代码：

CSS 代码：

上边代码效果其实也过的去，截图如下：

加上如下css 代码：

展示结果如下：

这个示例非常简单，实际工作中格子内可能会有多个元素，按钮，图片什么，所以格式内可以再使用 flex 布局，代码如下：

只这样还是不够，因为元素的高度可能不一样，所以需要某些需要的元素上加上

如上，关键代码都有了。

这里貌似不能上传代码，所以示例请看原文